<template>
	<div>
		<div id="query">
			<el-header class="el-header">
				排班管理-按科室
			</el-header>
		</div>
		<div style="margin-top: 15px;">
			<el-input placeholder="请输入内容" v-model="input" class="input-with-select" style="width: 500px;">
				<el-select v-model="select" slot="prepend" placeholder="请选择">
					<el-option label="科室名称" value="1"></el-option>
					<el-option label="科室编号" value="2"></el-option>
				</el-select>
				<el-button slot="append" icon="el-icon-search" @click="Query"></el-button>
			</el-input>
			<el-button type="success" style="margin-left: 100px;" @click="dialogFormVisible = true">添加科室排班</el-button>
		</div>
		<div>
			<el-table :data="tableData" style="width: 100%">
				<el-table-column prop="deptId" label="科室编号" width="120">
					<template slot-scope="scope"><span v-if="!scope.row.isEdit">{{scope.row.deptId}}</span>
						<el-input v-if="scope.row.isEdit" v-model="scope.row.deptId"></el-input>
					</template>
				</el-table-column>
				<el-table-column prop="deptName" label="科室名称" width="120">
					<template slot-scope="scope"><span v-if="!scope.row.isEdit">{{scope.row.deptName}}</span>
						<el-input v-if="scope.row.isEdit" v-model="scope.row.deptName"></el-input>
					</template>
				</el-table-column>
				<el-table-column prop="monday" label="周一" width="120">
					<template slot-scope="scope"><span v-if="!scope.row.isEdit">{{scope.row.monday}}</span>
						<el-input v-if="scope.row.isEdit" v-model="scope.row.monday"></el-input>
					</template>
				</el-table-column>
				<el-table-column prop="tuesday" label="周二" width="120">
					<template slot-scope="scope"><span v-if="!scope.row.isEdit">{{scope.row.tuesday}}</span>
						<el-input v-if="scope.row.isEdit" v-model="scope.row.tuesday"></el-input>
					</template>
				</el-table-column>
				<el-table-column prop="wednesday" label="周三" width="120">
					<template slot-scope="scope"><span v-if="!scope.row.isEdit">{{scope.row.wednesday}}</span>
						<el-input v-if="scope.row.isEdit" v-model="scope.row.wednesday"></el-input>
					</template>
				</el-table-column>
				<el-table-column prop="thursday" label="周四" width="120">
					<template slot-scope="scope"><span v-if="!scope.row.isEdit">{{scope.row.thursday}}</span>
						<el-input v-if="scope.row.isEdit" v-model="scope.row.thursday"></el-input>
					</template>
				</el-table-column>
				<el-table-column prop="friday" label="周五" width="120">
					<template slot-scope="scope"><span v-if="!scope.row.isEdit">{{scope.row.friday}}</span>
						<el-input v-if="scope.row.isEdit" v-model="scope.row.friday"></el-input>
					</template>
				</el-table-column>
				<el-table-column prop="saturday" label="周六" width="120">
					<template slot-scope="scope"><span v-if="!scope.row.isEdit">{{scope.row.saturday}}</span>
						<el-input v-if="scope.row.isEdit" v-model="scope.row.saturday"></el-input>
					</template>
				</el-table-column>
				<el-table-column prop="sunday" label="周日" width="120">
					<template slot-scope="scope"><span v-if="!scope.row.isEdit">{{scope.row.sunday}}</span>
						<el-input v-if="scope.row.isEdit" v-model="scope.row.sunday"></el-input>
					</template>
				</el-table-column>
				<el-table-column prop="function" label="操作">
					<template slot-scope="scope">
						<el-button v-if="!scope.row.isEdit" type="primary " @click="Change(scope.$index,scope.row)">修改
						</el-button>
						<el-button v-if="scope.row.isEdit" type="success "
							@click="CompleteChange(scope.$index,scope.row)">修改完成</el-button>
						<el-button type="danger " @click="Delete(scope.row.userId)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div>
			<el-row>
				<!-- <el-button type="danger" round @click="dialogFormVisible = true">添加用户</el-button> -->

				<el-dialog title="新增排班" :visible.sync="dialogFormVisible">
					<el-form :model="form">
						<el-form-item label="科室编号" :label-width="formLabelWidth">
							<el-input v-model="form.deptId" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="科室名称" :label-width="formLabelWidth">
							<el-input v-model="form.deptName" autocomplete="off"></el-input>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button @click="dialogFormVisible = false">取 消</el-button>
						<el-button type="primary " @click="Add">确 定</el-button>
					</div>
				</el-dialog>
			</el-row>
		</div>
	</div>
</template>



<style>
	.el-header {
		text-align: left;
		font-size: 40px;
		border-radius: 4px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		background-color: #4fc1b0;
	}

	.el-select .el-input {
		width: 130px;
	}

	.input-with-select .el-input-group__prepend {
		background-color: #fff;
	}
</style>
<script>
import axios from 'axios';
import {showMsgTitle} from '@/utils/api'
import {showMsgConfirm} from '@/utils/api'
import {getRequest}   from '@/utils/api'
	export default {
		data() {
			return {
				isEdit: false, //编辑
				// msg1: '用户管理',
				input: '',
				select: '',
				tableData: [{}],
				dialogFormVisible: false,
				form: {
					deptName: '',
					deptId: '',
					title: ''
				},
				formLabelWidth: '120px'
			}
		},
		mounted: function() {
			let url = "/admin/scheduling";
			let _this = this;
			getRequest(url).then(resp => {
			    if (resp.status == 200) {
			    	//alert(resp.data);
			      _this.tableData = resp.data;
			    } else {
			      _this.$message({type: 'error', message: '数据加载失败!'});
			    }
			  }, resp => {
			    _this.loading = false;
			    if (resp.response.status == 403) {
			      _this.$message({type: 'error', message: resp.response.data});
			    } else {
			      _this.$message({type: 'error', message: '数据加载失败!'});
			    }
			  }).catch(resp => {
			    //压根没见到服务器
			    _this.loading = false;
			    _this.$message({type: 'error', message: '数据加载失败!'});
			  });
			// this.axios.get('/api/user/allUser')
			// 	.then(res => {
			// 		this.tableData = res.data;
			// 	})
			// 	.catch(function(error) {
			// 		console.log(error);	
			// 	});
		},
		methods: {
			Query() {			
				let url = "/admin/scheduling";
				let _this = this;
				getRequest(url).then(resp => {
						if (this.select == '') {
							this.$message({
								showClose: true,
								type: "false",
								message: "请选择查询方式"
							});
						} else if (this.select == 2) {
							this.tableData = [];
							for (var i = 0; i < resp.data.length; i++) {
								if (this.input == resp.data[i].deptId) {
									this.tableData.push(resp.data[i]);
								}
								if (this.input == '') {
									this.tableData = resp.data;
								}
							}
						} else if (this.select == 1) {
							this.tableData = [];
							for (var i = 0; i < resp.data.length; i++) {
								if (this.input == resp.data[i].deptName) {
									this.tableData.push(resp.data[i]);
								}
								if (this.input == '') {
									this.tableData = resp.data;
								}
							}
						}
					})
			}, //query end
			Add() {
				this.dialogFormVisible = false;
				let data = JSON.stringify({
					userId: this.form.userId,
					password: this.form.password,
					name: this.form.name,
					deptId: this.form.deptId,
					account: this.form.account,
					level: this.form.level,
					fees: this.form.fees,
					title: this.form.title,
					fees:this.form.fees,
				});
				console.log(this.form);
				console.log(data);
				this.axios.post('/admin/user.json', data, {
						headers: {
							'Content-Type': 'application/json;charset=UTF-8'
						}
					})
					.then(resp => {})
					.catch(function(error) {
						console.log(error);
					});
				this.$router.go(0);
			}, //Add end
			Delete(userId) {
				this.axios.get('/api/user/delete', {
					params: {
						userId: userId
					}
				}).then(resp => {
					if (resp.data == 1) {
						this.$message({
							showClose: true,
							type: "success",
							message: "删除成功"
						});
					} else {
						this.$message({
							showClose: true,
							type: "false",
							message: "删除失败"
						});
					}
					this.$router.go(0);
				});
			}, //delete end
			Change(index, row) {
				this.$set(row, 'isEdit', true);
			}, //change end
			CompleteChange(index, row) {
				this.$set(row, 'isEdit', false);
				console.log(this.tableData);
				let data = JSON.stringify({
					userId: this.tableData[index].userId,
					password: this.tableData[index].password,
					name: this.tableData[index].name,
					deptId: this.tableData[index].deptId,
					account: this.tableData[index].account,
					level: this.tableData[index].level,
					fees: this.tableData[index].fees,
					title: this.tableData[index].title,
					fees:this.tableData[index].fees,
				});
				console.log(data);
				this.axios.post('/admin/user', data, {
						headers: {
							'Content-Type': 'application/json;charset=UTF-8'
						}
					}).then(res => {
						if (res.data == 1) {
							this.$message({
								showClose: true,
								type: "success",
								message: "修改成功"
							});
						} else {
							this.$message({
								showClose: true,
								type: "false",
								message: "修改失败"
							});
						}
					})
					.catch(function(error) {
						console.log(error);
					});
			} //change end

		} //method end
	 }
</script>
